<template>
  <div class="modal-container">
    <div v-if="getModalProps.showModalHeader" class="modal-header">
      <div class="modal-label">
        <div class="common-doc"></div>
        <span>{{ getModalProps.label }}</span>
      </div>
      <slot name="nav-button"></slot>
    </div>
    <el-descriptions
      :title="getModalProps.title"
      v-if="getModalProps.items.length"
      :column="getModalProps.column"
      style="margin-left:30px"
    >
      <el-descriptions-item
        v-for="(item, key) in getModalProps.items"
        :key="key"
        :label="item.label"
      >
        {{
          item.slotFn
            ? item.slotFn({ row: getModalProps.dataSource })
            : item.dictType
            ? dictFilter(getModalProps.dataSource[item.value], item.dictType)
            : getModalProps.dataSource[item.value]
        }}
      </el-descriptions-item>
    </el-descriptions>
    <slot></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      modalProps: {
        label: "默认",
        items: [],
        dataSource: {},
        title: "",
        showModalHeader: true,
        column: 3,
        ...this.itemProps,
      },
    };
  },
  computed: {
    getModalProps() {
      return {
        label: "默认",
        items: [],
        dataSource: {},
        title: "",
        showModalHeader: true,
        ...this.itemProps,
      };
    },
  },
  props: {
    itemProps: {
      default: () => {},
      type: Object,
    },
  },
};
</script>
<style lang="scss" scope>
@import "~@/style/modal.scss";
</style>
